<template>
  <a-modal
    v-model:open='open'
    :afterClose='resetImport'
    :confirmLoading='confirmLoading'
    @ok='handleUpload'
  >
    <template #title>
      <a-row justify='space-between'>
        <a-col
          class='ant-modal-title'
          :span='18'
        >
          {{ title }}
        </a-col>
        <a-col :span='6'>
          <a-button
            :loading='isLoading'
            @click='downloadFile'
          >
            <template #icon>
              <DownloadOutlined />
            </template>
            模板下载
          </a-button>
        </a-col>
      </a-row>
    </template>
    <a-upload-dragger
      :maxCount='1'
      :fileList='fileList'
      :beforeUpload='beforeUpload'
      :progress='progress'
      name='file'
      accept='.xlsx,.xls'
      @remove='handleRemove'
    >
      <p class='ant-upload-drag-icon'>
        <InboxOutlined />
      </p>
      <p class='ant-upload-text'>点击或拖拽文件至此区域即可上传</p>
    </a-upload-dragger>
  </a-modal>
</template>

<script setup>
import { useBoolean, useFileDownloader } from '@/hooks/index.js'
import { message } from 'ant-design-vue'
import Service from '@/utils/service.js'
import { sleep } from '@/utils/common.js'
import { round } from 'lodash-es'

const props = defineProps({
  code: {
    type: Number,
  },
})

const title = '导入'
const [open, toggleOpen] = useBoolean()
const [confirmLoading, toggleConfirmLoading] = useBoolean()

const { isLoading, downloadFile } = useFileDownloader('/lorawan/downloadTemplate', 'lorawan模板')

const fileList = ref([])
const progress = {
  format: percent => `${percent}%`,
}
const handleRemove = file => {
  const index = fileList.value.indexOf(file)
  const newFileList = fileList.value.slice()
  newFileList.splice(index, 1)
  fileList.value = newFileList
}

const beforeUpload = file => {
  fileList.value = [
    ...(fileList.value || []),
    {
      file,
      status: '',
      percent: 0,
      name: file.name,
    },
  ]
  return false
}

const resetImport = () => {
  fileList.value = []
  toggleConfirmLoading(false)
}

const handleImport = () => {
  toggleOpen(true)
}

const emit = defineEmits(['modalOk'])

const handleUpload = async () => {
  console.log('props:',props)
  const formData = new FormData()
  const [item] = fileList.value
  formData.append('file', item.file)
  formData.append('identificationCode', props['code'])
  toggleConfirmLoading()
  item.status = 'uploading'
  const { code, msg } = await Service.uploadAction('/upload', formData, progressEvent => {
    item.percent = round(progressEvent.progress * 100, 2)
  })
  toggleConfirmLoading()
  if (code === 200) {
    message.success('导入成功！')
    item.status = 'done'
    emit('modalOk')
    await sleep(500)
    toggleOpen(false)
  } else {
    item.status = 'error'
    message.error(msg)
  }
}

defineExpose({ handleImport })
</script>

<style lang='scss' scoped>
.account {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  &-input {
    width: calc(50% - 10px);
  }

  &-icon {
    color: #999;
    margin-left: 10px;

    &:hover {
      color: #777;
    }
  }
}
</style>
